<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Artist List</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        th, td {
            padding: 5px;
        }
    </style>
</head>

<body>
    <th:block th:include="/menu"></th:block>

    <h2>Artist List</h2>
    <div>
        <a th:href="@{/addArtist}">Add Artist</a>
        |&nbsp;
        <a th:href="@{'/artistFilter/{filterMethod}' (filterMethod = 'Age')}">Sort by age</a>
        |&nbsp;
        <a th:href="@{'/artistFilter/{filterMethod}' (filterMethod = 'Country')}">Sort by country</a>
    </div>
    <br/><br/>
    <div>
        <table  border="1">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Country</th>
                <th>Age</th>
                <th>Edit</th>
                <th>Delete</th>
                <th>Get Tracks</th>
            </tr>
            <tr th:each="artist : ${artists}">
                <td th:utext="${artist.id}"></td>
                <td th:utext="${artist.name}"></td>
                <td th:utext="${artist.country}"></td>
                <td th:utext="${artist.age}"></td>
                <td><a th:href="@{'/editArtist/{id}'(id=${artist.id})}">edit</a></td>
                <td><a th:href="@{'/deleteArtist/{id}'(id=${artist.id})}">delete</a></td>
                <td><a th:href="@{'/getTracksByArtist/{id}'(id=${artist.id})}">get tracks</a></td>
            </tr>
        </table>
    </div>
</body>
</html>